<template>
  <div>
    <el-card>
      <h3>管理员信息</h3>
      <el-divider></el-divider>
      管理员ID：{{ id }}
      <el-divider></el-divider>
      账号：{{ account }}
      <el-divider></el-divider>
      用户组：{{ usergroup }}
      <el-divider></el-divider>
      创建时间：{{ date }}
      <el-divider></el-divider>
      <div style="display: flex">
        <span>管理员头像：</span
        ><el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/users/avatar_upload"
          :show-file-list="false"
          :on-success="headerSuccess"
          :data="{ id }"
        >
          <img
            style="width: 150px; height: 150px"
            v-if="img"
            :src="img"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </el-card>
  </div>
</template>

<script>
import { accountinfo } from "@/apis/users";
import { getChinaTime, bus } from "@/utils/utils";

export default {
  data() {
    return {
      account: "",
      usergroup: "",
      date: "",
      img: "",
    };
  },
  created() {
    accountinfo({
      id: localStorage.id,
    }).then((res) => {
      let ret = res.data.accountInfo;
      this.account = ret.account;
      this.usergroup = ret.userGroup;
      this.date = getChinaTime(ret.ctime);
      this.img = ret.imgUrl;
    });
  },

  methods: {
    headerSuccess(res, file) {
      this.img = URL.createObjectURL(file.raw);
      console.log(res);

      bus.$emit("refreshHeader"); //打电话
    },
  },

  computed: {
    id() {
      return localStorage.id;
    },
  },
};
</script>

<style lang="less" scoped>
</style>
